<template>
	<view class="content-root">
		<view class="content-wrap">
			<view v-if="productList && productList.length > 0">
				<view class="list-item" v-for="(item, index) in productList" :key="index">
					<text class="itme-name">{{ item.name }}</text>
					<text class="itme-desc">{{ item.desc }}</text>
				</view>
			</view>
			<view class="no-data" v-else>暂无数据</view>
			<view class="no-more-data" v-if="noMoreData">
				<text>没有更多数据了</text>
			</view>
		</view>
		<view class="go-top" v-if="showGoToTop" @click="goToTop">
			<text>回到</text>
			<text>顶部</text>
		</view>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				productType: 1,
				currentPage: 1,
				lastPage: 1,
				lastPostion: 0,
				pageSize: 30,
				total: 0,
				noMoreData: false,
				productList: [],
				showGoToTop: false
			}
		},

		onLoad(option) {
			this.productType = option.productType
			this.getProductList(true)
		},

		onPageScroll(e) {
			this.lastPostion = e.scrollTop
			console.log(`当前滚动位置 this.lastPostion = ${this.lastPostion} , this.showGoToTop = ${this.showGoToTop}`)
			if (this.lastPostion > 300) {
				this.showGoToTop = true
			} else if (this.showGoToTop) {
				this.showGoToTop = false
			}
		},

		onPullDownRefresh() {
			this.lastPage = this.currentPage
			this.currentPage = 1
			this.getProductList(true)
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 600);
		},

		onReachBottom() {
			if (this.noMoreData) {
				return
			}
			this.lastPage = this.currentPage
			this.currentPage++
			this.getProductList(false)
		},

		methods: {
			//回到顶部
			goToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0,
				})
			},

			//获取商品列表
			async getProductList(refresh) {
				//let result =  await getProductList() // 网络请求

				setTimeout(() => { // 模拟网络请求
					if (refresh) {
						this.iniLocalData()
						return
					}

					this.loadMoreData()

				}, 500);
			},

			iniLocalData() {
				this.noMoreData = false
				this.productList = [{
						productId: "1234567890",
						name: "西蓝花",
						desc: "有机蔬菜，安全健康",
						skuType: [{
							id: "1",
							price: "9.99",
							txt: ""
						}]
					},
					{
						productId: "3234567890",
						name: "西红柿",
						desc: "有机蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "9.00",
							txt: ""
						}]
					},
					{
						productId: "4234567890",
						name: "洋葱",
						desc: "洋葱可生吃，安全健康;",
						skuType: [{
							id: "1",
							price: "5.00",
							txt: ""
						}]
					},
					{
						productId: "1734567890",
						name: "小青菜",
						desc: "有机蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "3.00",
							txt: ""
						}]
					},
					{
						productId: "1234467890",
						name: "上海青",
						desc: "蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "3.00",
							txt: ""
						}]
					},
					{
						productId: "1234567390",
						name: "上海青",
						desc: "蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "3.00",
							txt: ""
						}]
					},
					{
						productId: "1239567390",
						name: "娃娃菜",
						desc: "蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "8.00",
							txt: ""
						}]
					},
					{
						productId: "1239567390",
						name: "胡萝卜",
						desc: "有机蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "5.00",
							txt: ""
						}]
					},
					{
						productId: "1239567390",
						name: "西葫芦",
						desc: "蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "8.00",
							txt: ""
						}]
					},
					{
						productId: "1239567390",
						name: "紫甘蓝",
						desc: "蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "5.00",
							txt: ""
						}]
					},
					{
						productId: "1239567390",
						name: "大白菜",
						desc: "蔬菜，安全健康;",
						skuType: [{
							id: "1",
							price: "3.00",
							txt: ""
						}]
					}
				]
			},

			loadMoreData() {
				if (this.noMoreData) {
					return
				}
				let result = [{
						productId: "2239567390",
						name: "牛腱",
						desc: "新鲜牛肉;",
						skuType: [{
							id: "1",
							price: "109.00",
							txt: ""
						}]
					},
					{
						productId: "2239567391",
						name: "牛腿肉",
						desc: "新鲜牛肉;",
						skuType: [{
							id: "1",
							price: "99.00",
							txt: ""
						}]
					},
					{
						productId: "2239567392",
						name: "牛腩",
						desc: "新鲜牛肉;",
						skuType: [{
							id: "1",
							price: "89.00",
							txt: ""
						}]
					},
					{
						productId: "2339567390",
						name: "排骨",
						desc: "新鲜猪肉;",
						skuType: [{
							id: "1",
							price: "29.00",
							txt: ""
						}]
					},
					{
						productId: "2339567391",
						name: "后退肉",
						desc: "新鲜猪肉;",
						skuType: [{
							id: "1",
							price: "18.00",
							txt: ""
						}]
					},
					{
						productId: "2339567390",
						name: "五花肉",
						desc: "新鲜猪肉;",
						skuType: [{
							id: "1",
							price: "24.00",
							txt: ""
						}]
					}
				]

				this.productList = [...this.productList, ...result]
				this.noMoreData = true // 这个逻辑在实际项目开发中以接口返回的总数量为准
			}
		}

	}
</script>

<style scoped>
	.content-root {
		height: 100%;
		background-color: #f5f5f5;
		padding: 32rpx;
	}

	.content-wrap {
		background-color: #f5f5f5;
		padding-bottom: 80rpx;
	}

	.list-item {
		display: flex;
		padding: 16rpx 20rpx;
		flex-direction: column;
		background-color: #ffffff;
		border-radius: 16rpx;
		color: #000;
		margin-bottom: 32rpx;
	}

	.itme-name {
		font-size: 32rpx;
	}

	.itme-desc {
		font-size: 24rpx;
	}

	.no-data {
		height: 100%;
		text-align: center;
		margin-top: 400rpx;
		color: #000;
		font-size: 28rpx;
	}

	.no-more-data {
		width: 100%;
		height: 50rpx;
		color: #000;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		text-align: center;
	}

	.go-top {
		z-index: 99;
		position: fixed;
		display: flex;
		flex-flow: column;
		right: 0;
		bottom: 0;
		margin-right: 32rpx;
		margin-bottom: 200rpx;
		width: 80rpx;
		height: 80rpx;
		align-items: center;
		background-color: #eeeeee;
		border-radius: 50%;
		font-size: 20rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		text-align: center;
	}
</style>